<!-- map-container -->
<div class="map-container" ng-controller="TrafficCtrl">

  <!-- map-selector -->
  <div class="left-nav">
    <!-- map-selector -->
    <map-selector >
      <!-- <selector-header></selector-header> -->
      <selector-content>
        <div class="option-block">
          <span class="bar-header">日期范围:</span>
          <div class="bar-content">
            <label ng-repeat="date in dateList" class="nxt-radio" ng-class="{'checked': option.dateType == date.value}">
              <input type="radio" ng-model="option.dateType" value="{{date.value}}">
              <span>{{date.name}}</span>
            </label>
            
            <div ng-show="option.dateType=='custom'">
              <input type="date" class="nxt-input" ng-model="option.startDate">
              到
              <input type="date" class="nxt-input" ng-model="option.endDate">
            </div>
          </div>
        </div>
        <div class="option-block">
          <span class="bar-header">星期范围:</span>
          <div class="bar-content">
            <label class="nxt-checkbox" ng-repeat="week in weekList" ng-class="{'checked': haveWeek(week.value)}">
              <input type="checkbox" ng-click="checkWeek(week.value)"><span>{{week.name}}</span>
            </label>
          </div>
        </div>
        <div class="option-block">
          <span class="bar-header">时间范围:</span>
          <div class="bar-content">
            <label ng-repeat="time in timeList" class="nxt-radio" ng-class="{'checked': option.hourType == time.name}">
              <input type="radio" ng-model="option.hourType" value="{{time.name}}">
              <span>{{time.name}}</span>
            </label>

            <div ng-show="option.hourType=='自选时间'">
              <select ng-model="option.startHour" class="nxt-input">
                <option ng-repeat="hour in hourList" value="{{hour}}">{{hour}}时</option>
              </select>
              到
              <select ng-model="option.endHour" class="nxt-input">
                <option ng-repeat="hour in hourList" value="{{hour}}">{{hour}}时</option>
              </select>
            </div>
          </div>
        </div>
        <div class="option-block">
          <span class="bar-header">警情类型:</span>
          <div class="bar-content">
            <div class="checkbox-group">
              <div ng-repeat="(index, type) in types" class="row">
                <label class="checkbox-inline nxt-checkbox pull-left" ng-class="{'checked': haveType(type.name)}">
                  <input type="checkbox" class="form-control" ng-click="checkType(index, type.name)">&nbsp;
                </label>
                <span class="pull-left" ng-click="checkShowType(index)">
                  <a href="">{{type.name}}</a>
                </span>
                <div style="height: 6px"></div>
                <div class="sub-group" ng-show="showType == index">
                  <div ng-repeat="child in type.children">
                    <label class="checkbox-inline nxt-checkbox" ng-class="{'checked': haveSubType(child)}">
                      <input type="checkbox" class="form-control"ng-click="checkSubType(child)">{{child}}
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="option-button">
          <button class="btn btn-blue" ng-click="submit()">开始分析</button>
        </div>
      </selector-content>
    </map-selector>
    <div style="height: 10px"> </div>
    <map-operation ng-show="false">
      <div class="option-block">
        <div class="bar-header">
          显示案件点: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <label class="nxt-checkbox" ng-class="{'checked': option.showPoint}">
            <input type="checkbox" ng-model="option.showPoint">
            &nbsp;
          </label>
        </div>
      </div>

      <div class="option-block">
        <span class="bar-header">空间分析单元:</span>
        <div class="bar-content">
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='station'}" ng-show="option.station == '海宁公安局'">
            <input type="radio" ng-model="option.spaceCell" value="station">
            <span>派出所</span>
          </label>
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='square'}">
            <input type="radio" ng-model="option.spaceCell" value="square">
            <span>方格</span>
          </label>
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='heatmap'}">
            <input type="radio" ng-model="option.spaceCell" value="heatmap">
            <span>密度图</span>
          </label>
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='emphases'}">
            <input type="radio" ng-model="option.spaceCell" value="emphases">
            <span>重点场所</span>
          </label>
        </div>
      </div>
      <div class="option-block">
        <span class="bar-header"></span>
        <div class="bar-content" ng-show="option.spaceCell != 'heatmap'">
          
          <div class="slider" ng-show="option.spaceCell == 'square'">数&nbsp;&nbsp;&nbsp;量：{{option.number * 10}}%<input type="range" id="number" ng-model="option.number" value="option.number" max="10" min="0" class="pull-right"></div>
          <div class="slider">透明度：{{option.opacity * 10}}%<input type="range" id="opacity" ng-model="option.opacity" value="option.opacity" max="10" min="0" class="pull-right"></div>
          <div class="slider">高&nbsp;&nbsp;&nbsp;度：{{option.heightBase}}<input type="range" id="heightBase" ng-model="option.heightBase" value="option.heightBase" max="1000" min="0" class="pull-right"></div>
          <div class="slider" ng-show="option.spaceCell == 'square'">尺&nbsp;&nbsp;&nbsp;寸：{{option.size}}<input type="range" id="size" ng-model="option.size" value="option.size" max="10" min="1" class="pull-right"></div>
        </div>
      </div>
    </map-operation>
  </div>

  <!-- <map-info class="map-info" ng-show="showInfo > -1"></map-info> -->

  <div class="optional-button" ng-class="{'fold': isSummaryFold}">
    <div class="btn-group">
      <img src="img/type1.png" class="btn-bg" ng-show="mapType == 0">
      <img src="img/type2.png" class="btn-bg" ng-show="mapType == 1">
      <div class="btn btn-map" ng-click="changeMap(0)">
      </div>
      <div class="btn btn-map" ng-click="changeMap(1)">
      </div>
    </div>
    <div ng-click="flyHome()">
      <img src="img/home.png" class="btn btn-bg">
    </div>
  </div>


  <map-summary class="map-summary" ng-show="originData.length > 0">
    <summary-list>
      <summary-block>
        <block-header>{{option.station}}</block-header>
        <block-content>
          <div class="content-sum pull-left">
            <span class="num-pre">总警情数：</span>
          </div>
          <div class="big-num pull-left" ng-show="showInfo < 0">
            <span>{{originData.length}}</span>
          </div>
          <div class="big-num pull-left" ng-hide="showInfo < 0">
            <span ng-show="showType == 0">{{infoData[showInfo].objects.length}}</span>
            <span ng-show="showType == 1">{{infoData1[showInfo].objects.length}}</span>
          </div>
          <div class="num-btn">
            <button class="btn btn-blue" ng-click="">导出警情</button>
          </div>
        </block-content>
      </summary-block>

      <summary-block ng-show="showInfo < 0 && infoData.length > 0">
        <block-header>路口列表</block-header>
        <block-content>
          <div class="info-header">
            <div class="col-md-2">序号</div>
            <div class="col-md-3">数量</div>
            <div class="col-md-5">所在路口</div>
            <div class="col-md-2">详情</div>
          </div>
          <div class="info-line" ng-repeat="(index, info) in infoData | limitTo: 200">
            <div class="col-md-2">
              <div class="nxt-num">{{index + 1}}</div>
            </div>
            <div class="col-md-3">{{info.value}}</div>
            <div class="col-md-5">{{info.index}}</div>
            <div class="col-md-2"><a href="">详情</a></div>
          </div>
        </block-content>
        <block-content ng-show="option.spaceCell == 'square'">
          <div class="info-sum pull-left">
            <div class="num-pre litter">
              <span>方格数</span>
            </div>
            <div class="big-num">
              <span>{{infoData.length}}个</span>
            </div>
          </div>
          <div class="info-sum pull-left">
            <div class="num-pre">
              <span>方格警情数战总警情数的百分比</span>
            </div>
            <div class="big-num">
              <span>{{infoData.sum / originData.length * 100 | number: 1}}%</span>
            </div>
          </div>
        </block-content>
      </summary-block>

      <summary-block>
        <block-header>案件数量统计</block-header>
        <block-content>
          <div class="info-header">
            <div class="col-md-4">案件类型</div>
            <div class="col-md-6">数值</div>
            <div class="col-md-2">数量</div>
          </div>
          <div class="info-line" ng-repeat="item in dataMap.map">
            <div class="col-md-4">{{item.name}}</div>
            <div class="col-md-6">
              <div class="nxt-bar" style="width: {{item.value / dataMap.map[0].value * 100}}%"></div>
            </div>
            <div class="col-md-2">{{item.value}}</div>
          </div>
        </block-content>
      </summary-block>

      <summary-block>
        <block-header>案件时分布</block-header>
        <block-content>
          <div id="chart2" class="nxt-chart"></div>
        </block-content>
      </summary-block>
    </summary-list>
  </map-summary>

</div><!-- end map-container -->